<template>
    <sub-box>
        <breadcrumb :title="'合作单位管理'"></breadcrumb>
        <div class="box white-block" v-loading="loading">
            <el-button type="primary" class="btn" @click="$router.push($route.path+'/add')">新增合作单位</el-button>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20"
                           ref="table">
                <!--接受scope-->
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false" class="mr10"
                             @click="$router.push($route.path+'/'+scope.row.id)">编辑
                    </el-link>
                    <el-link type="primary" :underline="false" class="mr10" @click="removeList(scope.row.id)">删除
                    </el-link>
                    <el-link type="primary" :underline="false"
                             :class="{mr10:tableData.length>1&&scope.row.sort<data.total}"
                             v-if="tableData.length>1&&scope.row.sort>1"
                             @click="rowUpDown(scope.row,0)">
                        向上
                    </el-link>
                    <el-link type="primary" :underline="false" @click="rowUpDown(scope.row,1)"
                             v-if="tableData.length>1&&scope.row.sort<data.total">向下
                    </el-link>
                </template>
                <template slot="displayStatus" slot-scope="scope">
                    <span v-if="scope.row.displayStatus==0">显示</span>
                    <span v-else class="error">隐藏</span>
                </template>
                <template slot="logoImgUrl" slot-scope="scope">
                    <el-image
                        class="img"
                        :src="scope.row.logoImgUrl"
                        fit="contain">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page"></page>
        </div>
        <transition name="slide">
            <router-view @upload="getList"></router-view>
        </transition>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'sort',
                        label: '编号',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'logoImgUrl',
                        label: '合作单位logo',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'cooperationUnit',
                        label: '合作单位名称',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'displayStatus',
                        label: '当前状态',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '20%',
                        align: 'center'
                    }
                ],
                slotColumns: ['operation', 'displayStatus', 'logoImgUrl'],
                data: {},
                loading: false,
                index: 1
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getLength(row) {
                let i = null
                this.tableData.forEach((list, index) => {
                    if (list === row) {
                        i = index
                    }
                })
                return i
            },
            rowUp(row, index) {
                this.tableData.splice(index, 1)
                row.code--
                this.tableData[index - 1].code++
                this.tableData.splice(index - 1, 0, row)
            },
            rowDown(row, index) {
                row.code++
                this.tableData[index + 1].code--
                this.tableData.splice(index + 2, 0, row)
                this.tableData.splice(index, 1)
            },
            rowUpDown(row, index) {
                this.loading = true
                this.$http.post('/gsCooperationUnit/sortUpOrDown', {
                    id: row.id,
                    type: index
                }).then(result => {
                    if (result.success) {
                        this.getList()
                    } else {
                        this.loading = false
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/gsCooperationUnit/pageList', {
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                    this.$method.updateView(false, true)
                }).catch(() => {
                    this.loading = false
                })
            },
            removeList(id) {
                this.loading = true
                this.$http.post('/gsCooperationUnit/delById', {
                    id: id
                }).then(result => {
                    if (result.success) {
                        this.getList()
                    } else {
                        this.loading = false
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample,
            page
        }
    }
</script>
<style scoped lang="less">
    .btn {
        float: right;
        margin-bottom: .3rem;
    }

    .img {
        height: .42rem;
        line-height: .42rem;
        font-size: .2rem;
    }
</style>
